<template>
  <div class="page-container">
    <el-drawer v-model="drawer" title="详情" size="50%" @open="open" destroy-on-close close-on-click-modal>
      <div>
        <el-descriptions column="3">
          <el-descriptions-item label="ID:">{{ from.id }}</el-descriptions-item>
          <el-descriptions-item label="店铺名称:">{{ from.title }}</el-descriptions-item>
          <el-descriptions-item label="行业:">{{ from.industry_id }}</el-descriptions-item>
          <el-descriptions-item label="联系人:">{{ from.name }}</el-descriptions-item>
          <el-descriptions-item label="手机号:">{{ from.phone }}</el-descriptions-item>
          <el-descriptions-item label="省市区:">{{ from.fullAddress }}</el-descriptions-item>
          <el-descriptions-item label="地址:">{{ from.address }}</el-descriptions-item>
          <el-descriptions-item label="经纬度:">{{ from.longitude }}, {{ from.latitude }}</el-descriptions-item>
          <el-descriptions-item label="邮箱:">{{ from.email }}</el-descriptions-item>
          <el-descriptions-item label="营业开始时间:">{{ from.open_time }}</el-descriptions-item>
          <el-descriptions-item label="营业结束时间:">{{ from.close_time }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions column="1">
          <el-descriptions-item label="描述:" width="200px">{{ from.describe }}</el-descriptions-item>
        </el-descriptions>
        <div class="imgdes">
          <el-descriptions column="1">
            <el-descriptions-item label="商家logo:">
              <img style="width: 100px; height: 100px;" :src="from.logo" />
            </el-descriptions-item>
            <el-descriptions-item label="法人身份证正面照片:">
              <img style="width: 100px; height: 100px;" :src="from.id_heads_img" />
            </el-descriptions-item>
            <el-descriptions-item label="法人身份证反面照片:">
              <img style="width: 100px; height: 100px;" :src="from.id_back_img" />
            </el-descriptions-item>
            <el-descriptions-item label="法人手持身份证照片:">
              <img style="width: 100px; height: 100px;" :src="from.id_handheld_img" />
            </el-descriptions-item>
            <el-descriptions-item label="营业执照:">
              <img style="width: 100px; height: 100px;" :src="from.business_license_img" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  props: {
    value: Object
  },
  setup (props) {
    const state = reactive({
      drawer: false,
      from: {}
    })
    const open = () => {
      state.from = props.value
    }
    return {
      ...toRefs(state),
      open
    }
  }
}
</script>

<style lang="scss" scoped>
.imgdes {
  :deep(.el-descriptions__cell) {
    display: flex !important;
    align-items: center !important;
  }
}
</style>
